<template>
  <f7-page class="user-center">
    <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="arrow_back"></f7-link>
      </f7-nav-left>
      <f7-nav-title>二维码名片</f7-nav-title>
      <f7-nav-right>
        <f7-link href="/base/barcodeScan/">二维码扫描</f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-block strong class="text-align-center" inset>
      <f7-row>
        <f7-col class="text-align-center">
          <img src="../../../assets/img/user.png" height="80" />
        </f7-col>
      </f7-row>
      <f7-row class="margin">
        <f7-col class="text-align-center">
          <label>{{user.userName}}</label>
        </f7-col>
      </f7-row>
      <f7-qrcode :value="user.userId" :options="{ size: 250 }">
        <img src="../../../assets/img/logo-qm.png" slot="logo" />
      </f7-qrcode>
      <f7-block-title>扫一扫上面的二维码图案，加我为好友</f7-block-title>
    </f7-block>
  </f7-page>
</template>
<script>
import controller from "@/libs/framework/controller";
import User from "@/libs/framework/user.js";

export default class instance extends controller {
  async getViewModel() {
    let user = await this.$framework.account.getUser();
    this.bind({ user: user });
  }

  mixin() {
    return {
      data() {},
      methods: {},

      mounted() {
        if (this.user.profile && this.user.profile.photoUrl) {
          let user = {
            userId: this.user.userId,
            photoUrl: this.user.profile.photoUrl
          };
          User.getUserAvatar(user, path => {
            // 返回的是图片的网络路径，可直接设置在img的src属性上
            this.super.$(".head-portrait img").attr("src", path);
          });
        }
      }
    };
  }
}
</script>
<style scoped>
.page-content {
  background-color: gray;
}
</style>
